<template>
  <div class="m-[25px_15px] md:m-[25px_40px] xl:m-[50px] lg:flex">
    <div
      class="hidden lg:block lg:w-1/4 lg:max-w-[400px] lg:pr-[30px] xl:pr-[50px]"
    >
      <div class="relative h-0 pt-[150.27%] overflow-hidden bg-secondary">
        <UseImage
          :src="poster"
          width="200"
          height="600"
          class="absolute top-0 left-0 size-full"
          :alt="name"
        >
          <template #loading>
            <div class="flex items-center justify-center size-full">
              <RiLoaderLine class="size-8 animate-spin" />
            </div>
          </template>

          <template #error>
            <div class="flex items-center justify-center size-full">
              <RiFileImageLine class="size-9" />
            </div>
          </template>
        </UseImage>
      </div>
    </div>

    <div class="lg:flex-1">
      <div
        v-if="item.overview"
        class="max-w-[1000px] mb-[30px] overflow-hidden text-[15px] text-[#fafafa] xl:text-base"
      >
        <h2 class="mb-[10px] text-lg text-white xl:text-[24px]">Storyline</h2>

        <div v-html="truncate(item.overview, 200)" />
      </div>

      <div class="mb-[30px] text-[15px] text-[#f2f2f2] xl:text-base">
        <ul class="xl:flex xl:flex-wrap">
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.first_air_date"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              First Aired
            </div>
            <div class="flex-[2]">
              {{ fullDate(item.first_air_date) }}
            </div>
          </li>
          <li class="flex py-[2] lg:w-1/2 2xl:w-full" v-if="item.last_air_date">
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Last Aired
            </div>

            <div class="flex-[2]">
              {{ fullDate(item.last_air_date) }}
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.episode_run_time && item.episode_run_time.length"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Runtime
            </div>

            <div class="flex-[2]">
              {{ formatRunTime(item.episode_run_time) }}
            </div>
          </li>
          <li class="flex py-[2] lg:w-1/2 2xl:w-full" v-if="item.created_by">
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Creator
            </div>

            <div class="flex-[2]">
              <router-link
                :to="{ name: 'person', params: { id: person.id } }"
                v-for="person in item.created_by"
                :key="person.id"
                class="text-primary underline ml-1 first:ml-0"
                >{{ person.name }}</router-link
              >
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.genres && item.genres.length"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Genre
            </div>
            <div class="flex-[2]">
              <router-link
                :to="{ name: 'genreTv', params: { id: genre.id } }"
                v-for="genre in item.genres"
                :key="genre.id"
                class="text-primary underline ml-1 first:ml-0"
                >{{ genre.name }}</router-link
              >
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.number_of_seasons"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Seasons
            </div>

            <div class="flex-[2]">
              {{ item.number_of_seasons }}
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.number_of_episodes"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Episodes
            </div>

            <div class="flex-[2]">
              {{ item.number_of_episodes }}
            </div>
          </li>
          <li class="flex py-[2] lg:w-1/2 2xl:w-full" v-if="item.status">
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Status
            </div>

            <div class="flex-[2]">
              {{ item.status }}
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.original_language"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Language
            </div>

            <div class="flex-[2]">
              {{ fullLang(item.original_language) }}
            </div>
          </li>
          <li
            class="flex py-[2] lg:w-1/2 2xl:w-full"
            v-if="item.networks && item.networks.length"
          >
            <div
              class="flex-1 max-w-[90px] mr-[15px] text-white sm:max-w-[140px]"
            >
              Network
            </div>

            <div class="flex-[2]">
              {{ arrayToList(item.networks) }}
            </div>
          </li>
        </ul>
      </div>

      <ExternalLinks :links="item.external_ids" />
    </div>
  </div>
</template>
<script setup>
import { apiImgUrl } from "@/api";
import ExternalLinks from "./ExternalLinks.vue";
import { useDetails } from "@/hooks/useDetails";
import { UseImage } from "@vueuse/components";
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";
import { fullLang, arrayToList, fullDate, truncate } from "@/lib/filter";
import {computed} from "vue"

const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const { name } = useDetails(item);

const poster = computed(() => {
  if (item.poster_path) {
    return `${apiImgUrl}/w370_and_h556_bestv2${item.poster_path}`;
  } else {
    return false;
  }
});

if (item.homepage) {
  item.external_ids.homepage = item.homepage;
}

const formatRunTime = (times) => {
  return times.map((time) => `${time}m`).join(", ");
};
</script>
